import './App.css'

export default {
  name: 'App',
  template: `
  <div>
    <div>
      <img
        v-if="isShowImg1"
        class="img"
        src="https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
        alt=""
      />
      <img
        v-show="isShowImg2"
        class="img"
        src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
        alt=""
      />
    </div>
    <button @click="showImg1">Show Image 1</button>
    <button @click="showImg2">Show Image 2</button>
  </div>
  `,
  data() {
    return {
      isShowImg1: true,
      isShowImg2: true,
    }
  },
  methods: {
    showImg1() {
      this.isShowImg1 = !this.isShowImg1
    },
    showImg2() {
      this.isShowImg2 = !this.isShowImg2
    },
  },
}

/**
 * 1. 需要建立服务应用 -> node
 * 2. node应用上 -> 程序 -> 将.vue 文件转换为 .js 文件
 * 3. 将 es6 降级为 es5 甚至其下兼容
 * 4. Less/Sass 转化为 css文件
 * 
 * node 具备 fs 库 writeFile、readFile、makedir
 * 
 * webpack
 */
